// interface WidgetEmojiProps {}
import ZcoIM from '../index'

class WidgetEmoji {
    emotions_txet = new Map();
    emotions_pic = new Map();
    container = null;
    showEmojiSatus = false;
    insertPosition = null;
    lastEditRange = null;
    constructor() {
        // this.init();
    }

    init () {
        this.setEmotionsPic();
        this.setEmotionsTxet();
        this.createEmojiDom();
    }

    textFace2imgFace (content) {
        const patter = /\/:[0-9]{3}/g;
        let strs = content.match(patter);
        if (strs) {
            strs.forEach(str => {
                if (this.emotions_txet.has(str)) {
                    let img = '<img style="width:24px;height:24px;" src="./emoji/' + this.emotions_txet.get(str) + '"/>';
                    content = content.replace(str, img);
                }
            });
        }
        return content;
    }

    imgFace2textFace (content) {
        let patt1 = /<img src="..\/emoji\/[0-9]{1,3}.png">/g;
        var str = content.match(patt1);
        if (str) {
            for (var i = 0; i < str.length; i++) {
                var sub = str[i];
                for (var j = 0; j < sub.length - 1; j++) {
                    var tmp = sub.substring(0, sub.length - j);
                    let emotions_pic_key = tmp.replace('<img src="../emoji/', '').replace('">', '');
                    if (this.emotions_pic.has(emotions_pic_key)) {
                        content = content.replace(tmp, this.emotions_pic.get(emotions_pic_key));
                        break;
                    }
                }
            }
        }
        return content;
    }

    setEmotionsTxet () {
        this.emotions_txet.set('/:001', '001.png');
        this.emotions_txet.set('/:002', '002.png');
        this.emotions_txet.set('/:003', '003.png');
        this.emotions_txet.set('/:004', '004.png');
        this.emotions_txet.set('/:005', '005.png');
        this.emotions_txet.set('/:006', '006.png');
        this.emotions_txet.set('/:007', '007.png');
        this.emotions_txet.set('/:008', '008.png');
        this.emotions_txet.set('/:009', '009.png');
        this.emotions_txet.set('/:010', '010.png');
        this.emotions_txet.set('/:011', '011.png');
        this.emotions_txet.set('/:012', '012.png');
        this.emotions_txet.set('/:013', '013.png');
        this.emotions_txet.set('/:014', '014.png');
        this.emotions_txet.set('/:015', '015.png');
        this.emotions_txet.set('/:016', '016.png');
        this.emotions_txet.set('/:017', '017.png');
        this.emotions_txet.set('/:018', '018.png');
        this.emotions_txet.set('/:019', '019.png');
        this.emotions_txet.set('/:020', '020.png');
        this.emotions_txet.set('/:021', '021.png');
        this.emotions_txet.set('/:022', '022.png');
        this.emotions_txet.set('/:023', '023.png');
        this.emotions_txet.set('/:024', '024.png');
        this.emotions_txet.set('/:025', '025.png');
        this.emotions_txet.set('/:026', '026.png');
        this.emotions_txet.set('/:027', '027.png');
        this.emotions_txet.set('/:028', '028.png');
        this.emotions_txet.set('/:029', '029.png');
        this.emotions_txet.set('/:030', '030.png');
        this.emotions_txet.set('/:031', '031.png');
        this.emotions_txet.set('/:032', '032.png');
        this.emotions_txet.set('/:033', '033.png');
        this.emotions_txet.set('/:034', '034.png');
        this.emotions_txet.set('/:035', '035.png');
        this.emotions_txet.set('/:036', '036.png');
        this.emotions_txet.set('/:037', '037.png');
        this.emotions_txet.set('/:038', '038.png');
        this.emotions_txet.set('/:039', '039.png');
        this.emotions_txet.set('/:040', '040.png');
        this.emotions_txet.set('/:041', '041.png');
        this.emotions_txet.set('/:042', '042.png');
        this.emotions_txet.set('/:043', '043.png');
        this.emotions_txet.set('/:044', '044.png');
        this.emotions_txet.set('/:045', '045.png');
        this.emotions_txet.set('/:046', '046.png');
        this.emotions_txet.set('/:047', '047.png');
        this.emotions_txet.set('/:048', '048.png');
        this.emotions_txet.set('/:049', '049.png');
        this.emotions_txet.set('/:050', '050.png');
        this.emotions_txet.set('/:051', '051.png');
        this.emotions_txet.set('/:052', '052.png');
        this.emotions_txet.set('/:053', '053.png');
        this.emotions_txet.set('/:054', '054.png');
        this.emotions_txet.set('/:055', '055.png');
        this.emotions_txet.set('/:056', '056.png');
        this.emotions_txet.set('/:057', '057.png');
        this.emotions_txet.set('/:058', '058.png');
        this.emotions_txet.set('/:059', '059.png');
        this.emotions_txet.set('/:060', '060.png');
        this.emotions_txet.set('/:061', '061.png');
        this.emotions_txet.set('/:062', '062.png');
        this.emotions_txet.set('/:063', '063.png');
        this.emotions_txet.set('/:064', '064.png');
        this.emotions_txet.set('/:065', '065.png');
        this.emotions_txet.set('/:066', '066.png');
        this.emotions_txet.set('/:067', '067.png');
        this.emotions_txet.set('/:068', '068.png');
        this.emotions_txet.set('/:069', '069.png');
        this.emotions_txet.set('/:070', '070.png');
        this.emotions_txet.set('/:071', '071.png');
        this.emotions_txet.set('/:072', '072.png');
        this.emotions_txet.set('/:073', '073.png');
        this.emotions_txet.set('/:074', '074.png');
        this.emotions_txet.set('/:075', '075.png');
        this.emotions_txet.set('/:076', '076.png');
        this.emotions_txet.set('/:077', '077.png');
        this.emotions_txet.set('/:078', '078.png');
        this.emotions_txet.set('/:079', '079.png');
        this.emotions_txet.set('/:080', '080.png');
        this.emotions_txet.set('/:081', '081.png');
        this.emotions_txet.set('/:082', '082.png');
        this.emotions_txet.set('/:083', '083.png');
        this.emotions_txet.set('/:084', '084.png');
    }

    setEmotionsPic () {
        this.emotions_pic.set('001.png', '/:001');
        this.emotions_pic.set('002.png', '/:002');
        this.emotions_pic.set('003.png', '/:003');
        this.emotions_pic.set('004.png', '/:004');
        this.emotions_pic.set('005.png', '/:005');
        this.emotions_pic.set('006.png', '/:006');
        this.emotions_pic.set('007.png', '/:007');
        this.emotions_pic.set('008.png', '/:008');
        this.emotions_pic.set('009.png', '/:009');
        this.emotions_pic.set('010.png', '/:010');
        this.emotions_pic.set('011.png', '/:011');
        this.emotions_pic.set('012.png', '/:012');
        this.emotions_pic.set('013.png', '/:013');
        this.emotions_pic.set('014.png', '/:014');
        this.emotions_pic.set('015.png', '/:015');
        this.emotions_pic.set('016.png', '/:016');
        this.emotions_pic.set('017.png', '/:017');
        this.emotions_pic.set('018.png', '/:018');
        this.emotions_pic.set('019.png', '/:019');
        this.emotions_pic.set('020.png', '/:020');
        this.emotions_pic.set('021.png', '/:021');
        this.emotions_pic.set('022.png', '/:022');
        this.emotions_pic.set('023.png', '/:023');
        this.emotions_pic.set('024.png', '/:024');
        this.emotions_pic.set('025.png', '/:025');
        this.emotions_pic.set('026.png', '/:026');
        this.emotions_pic.set('027.png', '/:027');
        this.emotions_pic.set('028.png', '/:028');
        this.emotions_pic.set('029.png', '/:029');
        this.emotions_pic.set('030.png', '/:030');
        this.emotions_pic.set('031.png', '/:031');
        this.emotions_pic.set('032.png', '/:032');
        this.emotions_pic.set('033.png', '/:033');
        this.emotions_pic.set('034.png', '/:034');
        this.emotions_pic.set('035.png', '/:035');
        this.emotions_pic.set('036.png', '/:036');
        this.emotions_pic.set('037.png', '/:037');
        this.emotions_pic.set('038.png', '/:038');
        this.emotions_pic.set('039.png', '/:039');
        this.emotions_pic.set('040.png', '/:040');
        this.emotions_pic.set('041.png', '/:041');
        this.emotions_pic.set('042.png', '/:042');
        this.emotions_pic.set('043.png', '/:043');
        this.emotions_pic.set('044.png', '/:044');
        this.emotions_pic.set('045.png', '/:045');
        this.emotions_pic.set('046.png', '/:046');
        this.emotions_pic.set('047.png', '/:047');
        this.emotions_pic.set('048.png', '/:048');
        this.emotions_pic.set('049.png', '/:049');
        this.emotions_pic.set('050.png', '/:050');
        this.emotions_pic.set('051.png', '/:051');
        this.emotions_pic.set('052.png', '/:052');
        this.emotions_pic.set('053.png', '/:053');
        this.emotions_pic.set('054.png', '/:054');
        this.emotions_pic.set('055.png', '/:055');
        this.emotions_pic.set('056.png', '/:056');
        this.emotions_pic.set('057.png', '/:057');
        this.emotions_pic.set('058.png', '/:058');
        this.emotions_pic.set('059.png', '/:059');
        this.emotions_pic.set('060.png', '/:060');
        this.emotions_pic.set('061.png', '/:061');
        this.emotions_pic.set('062.png', '/:062');
        this.emotions_pic.set('063.png', '/:063');
        this.emotions_pic.set('064.png', '/:064');
        this.emotions_pic.set('065.png', '/:065');
        this.emotions_pic.set('066.png', '/:066');
        this.emotions_pic.set('067.png', '/:067');
        this.emotions_pic.set('068.png', '/:068');
        this.emotions_pic.set('069.png', '/:069');
        this.emotions_pic.set('070.png', '/:070');
        this.emotions_pic.set('071.png', '/:071');
        this.emotions_pic.set('072.png', '/:072');
        this.emotions_pic.set('073.png', '/:073');
        this.emotions_pic.set('074.png', '/:074');
        this.emotions_pic.set('075.png', '/:075');
        this.emotions_pic.set('076.png', '/:076');
        this.emotions_pic.set('077.png', '/:077');
        this.emotions_pic.set('078.png', '/:078');
        this.emotions_pic.set('079.png', '/:079');
        this.emotions_pic.set('080.png', '/:080');
        this.emotions_pic.set('081.png', '/:081');
        this.emotions_pic.set('082.png', '/:082');
        this.emotions_pic.set('083.png', '/:083');
        this.emotions_pic.set('084.png', '/:084');
    }

    getKeys () {
        const keyset = new Array();
        let count = 0;
        this.emotions_txet.forEach((key, val) => {
            keyset[count] = val;
            count++;
        });
        return keyset;
    }

    createEmojiDom () {
        const defaults = {
            id: 'widget-emoji-container',
            path: './emoji/',
            assign: 'content',
            tip: 'em_'
        };
        let strFace, labFace, myMapValue;
        strFace =
            '<div id="' +
            defaults.id +
            '" style="position:absolute;display:none;z-index:1;" class="widget-face">' +
            '<ul class="emoji-container-bg" style="margin: 0 auto; display: flex; align-items: center;flex-wrap: wrap; padding: 10px; width: 288px; list-style: none;" id="widget-emoji-table-container">';
        const keys = this.getKeys();
        for (var i = 0; i < keys.length; i++) {
            labFace = keys[i];
            myMapValue = this.emotions_txet.get(labFace);
            strFace += `<li style="text-align: center;" face="${labFace}" ><img style="width:24px;height:24px;" src="${defaults.path}${myMapValue}"  /></li>`;
        }
        strFace += '</ul></div>';

        let tempNode = document.createElement('div');
        tempNode.id = 'widget-message-emoji';
        tempNode.innerHTML = strFace;
        document.getElementById('zco-im').appendChild(tempNode);
        this.container = document.getElementById(defaults.id);
        this.getEmojiPosition();
        this.addClickEvent();
        document.body.addEventListener('click', () => {
            if (this.showEmojiSatus) {
                this.container.style.display = 'none';
                this.showEmojiSatus = false;
            }
        });
    }

    showEmoji () {
        if (!this.showEmojiSatus) {
            this.container.style.display = 'block';
            let messageParentNode = document.getElementById('zco-im');
            this.container.style.width = messageParentNode?.style.width;
            if (ZcoIM.type === 'web') {
                this.container.style.top = messageParentNode.offsetHeight - this.container.offsetHeight - document.getElementById('web-footer').offsetHeight - 10 + 'px';
            } else {
                this.container.style.top = messageParentNode.offsetHeight - this.container.offsetHeight - document.getElementById('mobile-footer').offsetHeight - 10 + 'px'
            }
            this.container.style.left = -20 + 'px';
            const textContainer = document.getElementById('widget-message-text');
            textContainer.addEventListener('blur', () => {
                this.insertPosition = window.getSelection().getRangeAt(0);
            });
        } else {
            this.container.style.display = 'none';
        }

        this.showEmojiSatus = !this.showEmojiSatus;
    }

    sendEmoji (data) {
        // const textContainer = document.getElementById('widget-message-text');
        this.insertHtmlAtCaret(data.html);
        this.container.style.display = 'none';
        this.showEmojiSatus = false;
    }

    addClickEvent () {
        let container = document.getElementById('widget-emoji-table-container');
        container?.childNodes.forEach(li => {
            li.childNodes[0].addEventListener('click', (e) => {
                let node = li.childNodes[0].cloneNode(true);
                this.sendEmoji({ html: node, value: e.target.value });
            });
        });
    }

    getEmojiPosition () {
        window.addEventListener('resize', () => {
            let messageParentNode = document.getElementById('zco-im');
            if (messageParentNode) {
                this.container.style.width = messageParentNode.style.width;
                this.container.style.top = messageParentNode.offsetHeight / 2 - (this.container.offsetHeight / 2 - messageParentNode.offsetTop) + 30 + 'px';
                this.container.style.left = this.container.offsetWidth / 2 - (this.container.offsetWidth / 2 - messageParentNode.offsetLeft) - 20 + 'px';
            }

        });
    }

    /** 获取光标 */
    insertHtmlAtCaret (html) {
        var edit = document.getElementById('widget-message-text');
        edit.focus();
        // 返回插入符号当前位置的selection对象
        var selection = window.getSelection();
        const node = document.createElement('span');
        node.appendChild(html);
        // 获取包含当前节点的文档片段
        var range = selection.getRangeAt(0)
        range.insertNode(node);
        if (node) {
            range = range.cloneRange();
            range.setStartAfter(node);
            range.collapse(true);
            selection.removeAllRanges();
            selection.addRange(range);
        }
    }
}


export default new WidgetEmoji();
